<template>
  <div class="inner-wrapper">
    <el-row>
      <el-col :span="24"><div class="grid-content">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>子系统</el-breadcrumb-item>
          <el-breadcrumb-item>重启子系统</el-breadcrumb-item>
        </el-breadcrumb>
      </div></el-col>
    </el-row>

    <el-table
      :data="this.tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="name"
        label="NAME">
      </el-table-column>
      <el-table-column
        prop="time"
        label="TIME">
      </el-table-column>
      <el-table-column
        prop="license"
        label="LICENSES FAULT STATUS">
        <template scope="scope">
          <a class="link"
             @click="getDetail(scope.row.name)">{{scope.row.license.handle}}</a>
          <span :class="scope.row.license.status=='OK'?'OK':'Fail'">{{scope.row.license.status}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="child"
        label="CHILD FAULT STATUS">
        <template scope="scope">
          <span :class="scope.row.child=='OK'?'OK':'Fail'">{{scope.row.child}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="dwell"
        label="LOCATE DWELL TIME">
      </el-table-column>
      <el-table-column
        prop="timeout"
        label="FAST TIMEOUT">
        <template scope="scope">
          <input type="checkbox" v-model="scope.row.timeout">
        </template>
      </el-table-column>
      <el-table-column
        prop="verify"
        label="VERITY POLICY">
      </el-table-column>
      <el-table-column
        prop="encrypt"
        label="ENCRYPT PD POLICY">
      </el-table-column>
      <el-table-column
        prop="sfxEnabled"
        label="SFX ENABLED">
        <template scope="scope">
          <input type="checkbox" v-model="scope.row.sfxEnabled">
        </template>
      </el-table-column>
      <el-table-column
        prop="uId"
        label="UUID">
      </el-table-column>
      <el-table-column
        prop="users"
        label="USERS">
      </el-table-column>
    </el-table>


    <el-row>
      <el-col :span="15"><div class="grid-content ">
        <div class="form-caption">RESTART SUBSYSTEM</div>
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="Shutdown Type:">
            <el-radio-group v-model="form.shutdown_type">
              <el-radio label="Normal" value="normal"></el-radio>
              <el-radio label="Abrupt" value="'abrupt"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <p>Are You Sure You Want to Restart This Subsystem?</p>
            <el-button type="primary" @click="restart()">RESTART SUBSYSTEM</el-button>
          </el-form-item>
        </el-form>



      </div></el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: 'subsystem_restart',
    data () {
      return {
        tableData: [{
          name: 'DEFAULT',
          time: 'Thu Apr 13 10:45:24 2017',
          license: {handle: 'Add Key', status: 'OK'},
          child: 'OK',
          dwell: '120 seconds',
          timeout: true,
          verify: 'Enabled',
          encrypt: 'No Policy',
          sfxEnabled: false,
          uId: '60000100f000s52sdd000001222010020',
          users: 2
        }],
        form: {
          shutdown_type: ''
        }
      }
    },
    methods: {
      onSubmit () {
        console.log('submit!')
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">


</style>
